// Content Script 入口文件 - 使用Vue3重构原有功能
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './styles/reset.css'
import ContentApp from './ContentApp.vue'

// 初始化函数
function initContentScript() {
  // 检查是否已经存在容器，避免重复创建
  let container = document.getElementById('request-interceptor-content-app')
  if (container) {
    console.log('🔧 Content app already exists, skipping creation')
    return
  }

  // 创建Vue应用实例
  const app = createApp(ContentApp)
  const pinia = createPinia()

  app.use(pinia)
  app.use(ElementPlus, {
    // 配置Element Plus的全局z-index
    zIndex: 999999999
  })

  // 创建一个容器来挂载Vue应用
  container = document.createElement('div')
  container.id = 'request-interceptor-content-app'
  container.setAttribute('data-request-interceptor', '')
  container.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    box-sizing: border-box;
  `
  document.body.appendChild(container)

  // 挂载Vue应用
  app.mount(container)

  console.log('🔧 Content script loaded with Vue3 + Pinia')
}

// 执行初始化
initContentScript()
